<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="utf-8">
        <title>
            二当家的Lay1.0
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="../houtaistatic/css/x-admin.css" media="all">
    </head>
    
    <body>
        <div class="x-body">

            <form class="layui-form" enctype="multipart/form-data" method="post" action="/routeXx/routexxadd">

                <input type="hidden" id="jbId" name="jbId" th:value="${jbId}"/>  <!--行程基本信息id-->
                <div class="layui-form-item">
                    <label for="title" class="layui-form-label">
                        <span class="x-red">*</span>标题
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" name="title" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="origin" class="layui-form-label">
                        <span class="x-red">*</span>顺序
                    </label>
                    <div class="layui-input-inline">
                        第<input type="text" id="orderTime" name="orderTime" required="" lay-verify="orderTime"
                               autocomplete="off" class="layui-input" style="width: 60px;display: inline-block;text-align: center" >天
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                <label for="origin" class="layui-form-label">
                    <span class="x-red">*</span>起点
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="origin" name="origin" required="" lay-verify="origin"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>

                <div class="layui-form-item">
                    <label for="destination" class="layui-form-label">
                        <span class="x-red">*</span>目的地
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="destination" name="destination" required="" lay-verify="destination"
                        autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="stay" class="layui-form-label">
                        <span class="x-red">*</span>住宿
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="stay" name="stay" required="" lay-verify="stay"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="dine" class="layui-form-label">
                        <span class="x-red">*</span>用餐介绍
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="dine" name="dine"  required="" lay-verify="dine"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>
                <div style="" >
                    <div class="routeJb-js" style="font-size:20px;">详细行程介绍
                        <input id="introduce" name="introduce" class="route-hidden" type="hidden" value="1"/>
                    </div>
                    <textarea id="route-text" name="recommendation" rows="5" style="display: none;"></textarea>
                    <div class="layui-form-item">
                        <label  class="layui-form-label">
                        </label>
                        <input class="layui-btn" type="submit" value="提交" onclick="submitclick()" />
                    </div>
                </div>
            </form>

        </div>
        <script type="text/javascript" src="/houtaistatic/js/jquery.min.js"></script>
        <script type="text/javascript">

            $(function() {

                $("#uploadFile").change(function() {
                    //$filePath = URL.createObjectURL(this.files);
                    //这是获取到图片元素，因为我这里的页面结构是统一的，input表单的上一个元素是img，
                    //所以这个地方只是为了获取你的img元素，然后设置src属性即可
                    //$(this).prev().attr('src', $filePath);

                    if(this.files.length>4){
                        alert("上传错误最多可选4张图！");
                        $("#imgs").html(null);
                        $("#shu").text(0);
                       // $("#uploadFile").click();
                    }else{
                        var str="";
                        for (var i=0;i<this.files.length;i=i+1) {
                            var path=URL.createObjectURL(this.files[i]);
                            str=str+"<img src='"+path+"' width='200px' height='100px' />";
                           // alert(str);
                        }
                        $("#imgs").html(str);
                        $("#shu").text(this.files.length);
                    }

                    //alert(this.files.length);
                });

                $("#imgBtn").click(function(){

                    $("#uploadFile").click();
                });
            });
        </script>

        <script src="../js/HandyEditor-master/HandyEditor.min.js">
        </script>
        <script type="text/javascript">
            var he = HE.getEditor('route-text',{
                width : '500px',
                height : '400px',
                item : ['bold','underline','color','orderedList','unorderedList','undo','redo']
            });
            //单击提交
            function submitclick() {
                var sub=document.getElementById("introduce");
                sub.value=he.getHtml();
            }
        </script>
    </body>

</html>